<template>
  <el-dialog :title="type + '字典数据'" v-model="dialogTableVisible" width="600px" append-to-body>
    <el-form :model="form" label-width="auto" ref="formRef" :rules="rules">
      <el-form-item label="字典类型" prop="dictType">
        <el-input v-model="form.dictType" disabled />
      </el-form-item>
      <el-form-item label="字典标签" prop="dictLabel">
        <el-input v-model="form.dictLabel" placeholder="请输入字典标签" />
      </el-form-item>
      <el-form-item label="字典键值" prop="dictValue">
        <el-input v-model="form.dictValue" placeholder="请输入字典键值" />
      </el-form-item>
      <el-form-item label="标签属性" prop="listClass">
        <el-select placeholder="请选择标签属性" v-model="form.listClass">
          <el-option label="无" value=""></el-option>
          <el-option label="默认(default)" value="default"></el-option>
          <el-option label="主要(primary)" value="primary"></el-option>
          <el-option label="成功(success)" value="success"></el-option>
          <el-option label="信息(info)" value="info"></el-option>
          <el-option label="警告(warning)" value="warning"></el-option>
          <el-option label="危险(danger)" value="danger"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="字典顺序" prop="dictSort">
        <el-input-number v-model="form.dictSort" :min="1" controls-position="right" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio value="0">正常</el-radio>
          <el-radio value="1">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div style="display: flex; justify-content: right">
      <el-button type="primary" @click="submitForm(formRef)">确认</el-button>
      <el-button @click="dialogTableVisible = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage, FormInstance } from "element-plus";
import { reactive, ref } from "vue";
import { addDictDataApi, editDictDataApi } from "@/api/modules/dict";

const dialogTableVisible = ref(false);

const type = ref("新增");

const formRef = ref();

const form = reactive({
  dictType: "",
  dictLabel: "",
  dictValue: "",
  dictSort: 1,
  listClass: "",
  status: "0"
});

const rules = reactive({
  dictLabel: [{ required: true, message: "请输入字典标签", trigger: "blur" }],
  dictValue: [{ required: true, message: "请输入字典键值", trigger: "blur" }]
});

const dictCode = ref(null);

const openDialog = (data: any) => {
  dialogTableVisible.value = true;
  if (data.type === "add") {
    type.value = "新增";
    dictCode.value = null;
    form.dictType = data.dictType;
    form.dictLabel = "";
    form.dictValue = "";
    form.dictSort = 1;
    form.listClass = "";
    form.status = "0";
  } else if (data.type === "edit") {
    type.value = "编辑";
    dictCode.value = data.dictCode;
    form.dictType = data.dictType;
    form.dictLabel = data.dictLabel;
    form.dictValue = data.dictValue;
    form.dictSort = data.dictSort;
    form.listClass = data.listClass;
    form.status = data.status;
  }
};

const emit = defineEmits(["update"]);

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async valid => {
    if (!valid) return;
    if (valid) {
      if (type.value === "新增") {
        const res = await addDictDataApi(form);
        if (res.code === 200) {
          emit("update");
          ElMessage.success("添加成功");
          dialogTableVisible.value = false;
        } else {
          ElMessage.error(res.msg);
        }
      } else {
        const res = await editDictDataApi({ ...form, dictCode: dictCode.value! });
        if (res.code === 200) {
          emit("update");
          ElMessage.success("编辑成功");
          dialogTableVisible.value = false;
        } else {
          ElMessage.error(res.msg);
        }
      }
    }
  });
};

defineExpose({
  openDialog
});
</script>

<style scoped lang="scss"></style>
